<template>
  <view class="receive-page">
    <!-- 顶部导航 -->
    <view class="nav-header">
      <view class="nav-left" @click="goBack">
        <u-icon name="arrow-left" color="#ffffff" size="24"></u-icon>
      </view>
      <view class="nav-center">
        <text class="nav-title">我的收文</text>
      </view>
      <view class="nav-right"> </view>
    </view>

    <!-- 搜索区域 -->
    <view class="search-section">
      <view class="search-header" @click="toggleSearch">
        <view class="search-header-left">
          <u-icon name="search" size="18" color="#1678ff"></u-icon>
          <text class="search-header-title">筛选条件</text>
        </view>
        <view class="search-header-right">
          <text class="search-toggle-text">{{ searchExpanded ? '收起' : '展开' }}</text>
          <u-icon
            :name="searchExpanded ? 'arrow-up' : 'arrow-down'"
            size="16"
            color="#999"
          ></u-icon>
        </view>
      </view>
      <view class="search-form" v-show="searchExpanded">
        <view class="form-row">
          <input
            class="search-input"
            v-model="searchForm.sourceDocumentTitle"
            placeholder="请输入文件标题"
            @input="handleSearch"
          />
        </view>
        <view class="form-row">
          <input
            class="search-input"
            v-model="searchForm.receiveDocumentSymbol"
            placeholder="请输入文件字号"
            @input="handleSearch"
          />
        </view>
        <view class="search-buttons">
          <text class="search-btn" @click="handleSearch">查询</text>
          <text class="reset-btn" @click="handleReset">重置</text>
        </view>
      </view>
    </view>

    <!-- 统计卡片 -->

    <!-- 筛选标签 -->
    <view class="filter-section">
      <scroll-view class="filter-scroll" scroll-x="true">
        <view class="filter-tags">
          <view
            class="filter-tag"
            :class="{ active: activeFilter === 'pending' }"
            @click="setFilter('pending')"
          >
            <text>草稿箱</text>
          </view>
          <view
            class="filter-tag"
            :class="{ active: activeFilter === 'processing' }"
            @click="setFilter('processing')"
          >
            <text>处理中</text>
          </view>
          <view
            class="filter-tag"
            :class="{ active: activeFilter === 'completed' }"
            @click="setFilter('completed')"
          >
            <text>已完成</text>
          </view>
          <view
            class="filter-tag"
            :class="{ active: activeFilter === 'register' }"
            @click="setFilter('register')"
          >
            <text>登记收文</text>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 收文列表 -->
    <view class="list-section">
      <view class="list-header" v-if="activeFilter === 'pending'">
        <view class="list-title-section">
          <text class="list-title">收文草稿列表</text>
          <text class="list-count">共{{ pagination.total }}条</text>
        </view>
        <view class="add-button" @click="addReceive">
          <text class="add-text">+ 手动登记收文</text>
        </view>
      </view>
      <view class="list-header" v-if="activeFilter === 'register'">
        <view class="list-title-section">
          <text class="list-title">待登记收文列表</text>
          <text class="list-count">共{{ pagination.total }}条</text>
        </view>
      </view>

      <!-- 加载状态 -->
      <view class="loading-state" v-if="loading">
        <text class="loading-text">加载中...</text>
      </view>

      <view class="receive-list" v-else-if="receiveList.length > 0">
        <view
          class="receive-item"
          v-for="item in receiveList"
          :key="item.id"
          @click="viewDetail(item)"
        >
          <view class="item-header">
            <view class="item-title">
              <text class="title-text">{{ item.sourceDocumentTitle || item.title }}</text>
              <view class="status-badge" :class="getStatusClass(item)">
                <text class="status-text">{{ getStatusText(item) }}</text>
              </view>
            </view>
            <text class="item-time">{{
              formatDateTime(item.receiveDocumentTime || item.createdAt || '')
            }}</text>
          </view>
          <view class="item-content">
            <text class="item-desc">来文单位：{{ item.sourceCompanyName || '未知' }}</text>
            <text class="item-desc">文件字号：{{ item.receiveDocumentSymbol || '未知' }}</text>
          </view>
          <view class="item-footer">
            <view class="item-info">
              <text class="info-text"
                >来源：{{ item.sourceDocumentId ? '系统录入' : '手动录入' }}</text
              >
            </view>
            <view class="item-actions">
              <!-- 查看按钮：除了"登记收文"状态外都显示 -->
              <text
                v-if="activeFilter !== 'register'"
                class="action-btn"
                @click.stop="viewDetail(item)"
                >查看</text
              >

              <!-- 登记按钮：只在"登记收文"状态显示 -->
              <text
                v-if="activeFilter === 'register'"
                class="action-btn primary"
                @click.stop="registerItem(item)"
              >
                登记
              </text>

              <!-- 提交按钮：只在"待处理"状态显示 -->
              <text
                v-if="activeFilter === 'pending'"
                class="action-btn primary"
                @click.stop="submitItem(item)"
              >
                提交
              </text>

              <!-- 删除按钮：只在"待处理"状态且为"手动录入"时显示 -->
              <text
                v-if="activeFilter === 'pending' && !item.sourceDocumentId"
                class="action-btn danger"
                @click.stop="deleteItem(item)"
              >
                删除
              </text>
            </view>
          </view>
        </view>
      </view>

      <view class="empty-state" v-else>
        <text class="empty-icon">📄</text>
        <text class="empty-text">暂无收文数据</text>
      </view>
    </view>

    <!-- 分页 -->
    <view class="pagination-section" v-if="pagination.total > 0">
      <view class="pagination-info">
        <text
          >共{{ pagination.total }}条，第{{ pagination.current }}/{{
            Math.ceil(pagination.total / pagination.size)
          }}页</text
        >
      </view>
      <view class="pagination-buttons">
        <text
          class="page-btn"
          :class="{ disabled: pagination.current <= 1 }"
          @click="handlePrevPage"
        >
          上一页
        </text>
        <text
          class="page-btn"
          :class="{
            disabled: pagination.current >= Math.ceil(pagination.total / pagination.size),
          }"
          @click="handleNextPage"
        >
          下一页
        </text>
      </view>
    </view>

    <!-- 预览文件弹窗 -->
    <view class="preview-modal" v-if="previewVisible" @click="closePreview">
      <view class="preview-content" @click.stop>
        <view class="preview-header">
          <text class="preview-title">{{ previewFileName }}</text>
          <text class="close-btn" @click="closePreview">×</text>
        </view>
        <view class="preview-body">
          <text class="preview-text">文件预览功能开发中...</text>
        </view>
      </view>
    </view>

    <!-- 登记弹窗 -->
    <view class="register-modal" v-if="registerVisible" @click="closeRegister">
      <view class="register-content" @click.stop>
        <view class="register-header">
          <text class="register-title">收文登记</text>
          <text class="close-btn" @click="closeRegister">×</text>
        </view>
        <view class="register-body">
          <text class="register-text">登记功能开发中...</text>
        </view>
      </view>
    </view>

    <!-- 提交审批人员选择弹窗 -->
    <view class="submit-modal" v-if="submitVisible" @click="closeSubmit">
      <view class="submit-content" @click.stop>
        <view class="submit-header">
          <text class="submit-title">选择审批人员</text>
          <text class="close-btn" @click="closeSubmit">×</text>
        </view>
        <view class="submit-body">
          <!-- 审批人员列表 -->
          <view class="approver-section">
            <view class="section-title">
              <text>可选审批人员（{{ availableApprovers.length }}）</text>
            </view>
            <scroll-view class="approver-list" scroll-y="true">
              <view
                class="approver-item"
                v-for="approver in availableApprovers"
                :key="approver.key"
                :class="{ selected: selectedApprovers.includes(approver.key) }"
                @click="selectApprover(approver.key)"
              >
                <view class="approver-info">
                  <text class="approver-name">{{ approver.label }}</text>
                  <text class="approver-dept">{{ approver.deptName }}</text>
                </view>
                <view class="approver-check" v-if="selectedApprovers.includes(approver.key)">
                  <text class="check-icon">✓</text>
                </view>
              </view>
            </scroll-view>
          </view>

          <!-- 已选人员 -->
          <view class="selected-section" v-if="selectedApprovers.length > 0">
            <view class="section-title">
              <text>已选审批人员（{{ selectedApprovers.length }}）</text>
            </view>
            <view class="selected-list">
              <view
                class="selected-item"
                v-for="(approverId, index) in selectedApprovers"
                :key="approverId"
              >
                <view class="selected-order">{{ index + 1 }}</view>
                <text class="selected-name">
                  {{ availableApprovers.find((a) => a.key === approverId)?.label }}
                </text>
                <text class="remove-btn" @click.stop="removeApprover(approverId)">×</text>
              </view>
            </view>
          </view>

          <!-- 审批意见 -->
          <!-- <view class="opinion-section">
            <view class="section-title">
              <text>审批意见</text>
            </view>
            <textarea
              class="opinion-input"
              v-model="approvalOpinion"
              placeholder="请输入审批意见"
              :maxlength="500"
            />
          </view> -->

          <!-- 操作按钮 -->
          <view class="submit-actions">
            <view class="action-btn cancel" @click="closeSubmit">
              <text class="btn-text">取消</text>
            </view>
            <view
              class="action-btn primary"
              :class="{
                disabled:
                  selectedApprovers.length === 0 || !approvalOpinion.trim() || submitLoading,
              }"
              @click="confirmSubmit"
            >
              <text class="btn-text">{{ submitLoading ? '提交中...' : '确认提交' }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import {
  getReceiveRegisterPage,
  deleteReceiveRegister,
  getReceiveDocumentFlowByStep,
  submitApprovers,
  getMyReceiveDocuments,
  createDocumentViewSync,
  type ReceiveRegisterQueryDTO,
  type ReceiveDocumentDistributeItem,
} from '@/Api/receive'
import { useMemberStore } from '@/stores/modules/member'

// 统计数据
const stats = ref({
  total: 0,
  pending: 0,
  completed: 0,
})

// 当前筛选状态（默认为待处理）
const activeFilter = ref('pending')

// 加载状态
const loading = ref(false)

// 搜索表单
const searchForm = ref<ReceiveRegisterQueryDTO>({
  sourceDocumentTitle: '',
  receiveDocumentSymbol: '',
})

// 查询面板展开状态
const searchExpanded = ref(false)

// 切换查询面板展开/收起
const toggleSearch = () => {
  searchExpanded.value = !searchExpanded.value
}

// 分页数据
const pagination = ref({
  current: 1,
  size: 20,
  total: 0,
})

// 收文列表数据
const receiveList = ref<ReceiveDocumentDistributeItem[]>([])

// 预览相关
const previewVisible = ref(false)
const previewFileName = ref('')
const previewFileUrl = ref('')

// 登记相关
const registerVisible = ref(false)
const currentRegisterItem = ref<ReceiveDocumentDistributeItem | null>(null)

// 提交相关
const submitVisible = ref(false)
const currentSubmitItem = ref<ReceiveDocumentDistributeItem | null>(null)
const availableApprovers = ref<any[]>([])
const selectedApprovers = ref<any[]>([])
const approvalOpinion = ref('-')
const submitLoading = ref(false)
const memberStore = useMemberStore()

// 筛选后的列表
const filteredList = computed(() => {
  if (activeFilter.value === 'all') {
    return receiveList.value
  }
  return receiveList.value.filter((item: any) => item.status === activeFilter.value)
})

// 获取状态文本
const getStatusText = (item: ReceiveDocumentDistributeItem) => {
  // 优先判断是否被退回
  if ((item as any).statue === 'reject') {
    return '已退回'
  }
  if (item.sourceDocumentId) {
    return '系统录入'
  }
  return '手动录入'
}

// 获取状态样式类
const getStatusClass = (item: ReceiveDocumentDistributeItem) => {
  // 优先判断是否被退回
  if ((item as any).statue === 'reject') {
    return 'rejected'
  }
  if (item.sourceDocumentId) {
    return 'system'
  }
  return 'manual'
}

// 设置筛选条件
const setFilter = (filter: string) => {
  activeFilter.value = filter
  loadData()
}

// 返回上一页
const goBack = () => {
  const pages = getCurrentPages()
  // 如果页面栈只有1个页面，说明无法返回，直接跳转到首页
  if (pages.length <= 1) {
    console.log('[goBack] 页面栈只有1个，跳转到首页')
    uni.reLaunch({
      url: '/pages/index/index',
    })
  } else {
    // 有多个页面，执行返回操作
    uni.navigateBack({
      delta: 1,
    })
  }
}

// 添加收文
const addReceive = () => {
  uni.navigateTo({
    url: '/pages/document/receive/darf/register',
    fail: () => {
      uni.showToast({
        title: '页面跳转失败',
        icon: 'none',
      })
    },
  })
}

// 搜索处理
const handleSearch = () => {
  pagination.value.current = 1
  loadData()
}

// 重置搜索
const handleReset = () => {
  searchForm.value.sourceDocumentTitle = ''
  searchForm.value.receiveDocumentSymbol = ''
  pagination.value.current = 1
  loadData()
}

// 查看详情
const viewDetail = (item: ReceiveDocumentDistributeItem) => {
  uni.navigateTo({
    url: `/pages/document/receive/todo/detail?id=${item.id}&source=draft`,
  })
}

// 预览文件
const previewFile = (item: ReceiveDocumentDistributeItem) => {
  previewFileName.value = item.sourceDocumentTitle || item.title || '文件'
  previewFileUrl.value = item.documentUrl || item.fileUrl || ''
  previewVisible.value = true
}

// 关闭预览
const closePreview = () => {
  previewVisible.value = false
}

// 登记收文
const registerItem = async (item: ReceiveDocumentDistributeItem) => {
  // 如果是系统录入的（有sourceDocumentId），调用同步查看记录接口
  if (item.sourceDocumentId && item.id) {
    try {
      const userInfo = memberStore.profile
      const syncData = {
        documentId: item.sourceDocumentId,
        documentTitle: item.sourceDocumentTitle || item.title || '',
        companyId: (item as any).sourceCompanyId || (item as any).receiveCompanyId || 0,
        companyName: item.sourceCompanyName || '',
        viewerName: userInfo?.nickname || userInfo?.name || userInfo?.username || '',
        viewerDeptName: userInfo?.deptName || '',
        viewStatus: 1, // 1-已查看
        viewedAt: new Date().toISOString(),
        createdAt: new Date().toISOString(),
      }
      await createDocumentViewSync(item.id, syncData)
    } catch (syncError) {
      // 同步失败不影响操作，只记录日志
      console.warn('同步查看记录失败:', syncError)
    }
  }

  // 跳转到登记详情页面
  uni.navigateTo({
    url: `/pages/document/receive/todo/detail?id=${item.id}&source=register`,
  })
}

// 关闭登记弹窗
const closeRegister = () => {
  registerVisible.value = false
  currentRegisterItem.value = null
}

// 删除收文
const deleteItem = async (item: ReceiveDocumentDistributeItem) => {
  try {
    const result = await uni.showModal({
      title: '删除确认',
      content: '确定删除该手动登记的收文吗？',
      confirmText: '删除',
      cancelText: '取消',
    })

    if (result.confirm) {
      await deleteReceiveRegister(item.id)
      uni.showToast({
        title: '删除成功',
        icon: 'success',
      })
      loadData()
    }
  } catch (error) {
    console.error('删除失败:', error)
    uni.showToast({
      title: '删除失败',
      icon: 'none',
    })
  }
}

// 提交收文
const submitItem = async (item: ReceiveDocumentDistributeItem) => {
  try {
    currentSubmitItem.value = item

    // 获取当前步骤的审批人员列表
    let stepOrder = item.receiveStepOrder || 1

    const response = await getReceiveDocumentFlowByStep(item.id, stepOrder)

    if (response.code === 200 && response.data) {
      const approvers = response.data.approvers || []

      if (approvers.length === 0) {
        uni.showToast({
          title: '该步骤没有可选的审批人员',
          icon: 'none',
        })
        return
      }

      // 转换为选择列表格式
      availableApprovers.value = approvers.map((x: any) => ({
        key: x.id,
        label: x.realName || x.nickname || x.username,
        deptName: x.deptName || '未分配部门',
        job: x.job || '领导',
      }))

      selectedApprovers.value = []
      approvalOpinion.value = '-'
      submitVisible.value = true
    } else {
      uni.showToast({
        title: '获取审批人员失败',
        icon: 'none',
      })
    }
  } catch (error) {
    console.error('提交失败:', error)
    uni.showToast({
      title: '提交失败',
      icon: 'none',
    })
  }
}

// 选择审批人员
const selectApprover = (approverId: number) => {
  if (!selectedApprovers.value.includes(approverId)) {
    selectedApprovers.value.push(approverId)
  }
}

// 移除审批人员
const removeApprover = (approverId: number) => {
  const index = selectedApprovers.value.indexOf(approverId)
  if (index > -1) {
    selectedApprovers.value.splice(index, 1)
  }
}

// 确认提交
const confirmSubmit = async () => {
  if (selectedApprovers.value.length === 0) {
    uni.showToast({
      title: '请选择审批人员',
      icon: 'none',
    })
    return
  }

  if (!approvalOpinion.value.trim()) {
    uni.showToast({
      title: '请输入审批意见',
      icon: 'none',
    })
    return
  }

  try {
    submitLoading.value = true

    // 构造选中人员列表
    const approverList = selectedApprovers.value.map((key: number) => {
      const a = availableApprovers.value.find((x) => x.key === key)
      return { id: key, name: a?.label || '' }
    })

    if (currentSubmitItem.value) {
      const response = await submitApprovers({
        bizId: currentSubmitItem.value.id,
        approvers: approverList,
        opinion: approvalOpinion.value.trim(),
        decision: 'agree',
        receiveStepName: (currentSubmitItem.value as any).receiveStepName || '',
        receiveStepOrder: (currentSubmitItem.value as any).receiveStepOrder || 1,
      })

      if (response && response.code === 200) {
        uni.showToast({
          title: '提交成功',
          icon: 'success',
        })
        submitVisible.value = false
        selectedApprovers.value = []
        approvalOpinion.value = '-'
        loadData()
      } else {
        throw new Error(response?.message || '提交失败')
      }
    }
  } catch (error: any) {
    uni.showToast({
      title: '提交失败：' + (error.message || '未知错误'),
      icon: 'none',
    })
  } finally {
    submitLoading.value = false
  }
}

// 关闭提交弹窗
const closeSubmit = () => {
  submitVisible.value = false
  currentSubmitItem.value = null
  selectedApprovers.value = []
  approvalOpinion.value = '-'
}

// 分页处理
const handlePrevPage = () => {
  if (pagination.value.current > 1) {
    pagination.value.current--
    loadData()
  }
}

const handleNextPage = () => {
  const totalPages = Math.ceil(pagination.value.total / pagination.value.size)
  if (pagination.value.current < totalPages) {
    pagination.value.current++
    loadData()
  }
}

// 格式化日期时间
const formatDateTime = (dateTime: string) => {
  if (!dateTime) return '-'
  const date = new Date(dateTime)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
}
// 加载数据
const loadData = async () => {
  try {
    loading.value = true

    let response: any

    // 根据筛选条件调用不同的接口
    if (activeFilter.value === 'pending') {
      // 待处理：查询草稿（receiveStepOrder = 1）
      const params: ReceiveRegisterQueryDTO = {
        currentUserId: memberStore.profile?.id, // 当前用户ID
        pageNum: pagination.value.current,
        pageSize: pagination.value.size,
        receiveStepOrder: 1, // 草稿状态
        ...searchForm.value,
      }
      response = await getReceiveRegisterPage(params)
      console.log('[loadData] 待处理查询参数:', params)
      console.log('[loadData] 待处理响应:', response)
    } else if (activeFilter.value === 'processing') {
      // 处理中：调用我的收文接口
      const params = {
        pageNum: pagination.value.current,
        pageSize: pagination.value.size,
        flowStatus: 'processing', // 处理中状态
        ...searchForm.value,
      }
      response = await getMyReceiveDocuments(params)
      console.log('[loadData] 处理中查询参数:', params)
      console.log('[loadData] 处理中响应:', response)
    } else if (activeFilter.value === 'completed') {
      // 已完成：调用我的收文接口
      const params = {
        pageNum: pagination.value.current,
        pageSize: pagination.value.size,
        flowStatus: 'completed', // 已完成状态
        ...searchForm.value,
      }
      response = await getMyReceiveDocuments(params)
      console.log('[loadData] 已完成查询参数:', params)
      console.log('[loadData] 已完成响应:', response)
    } else if (activeFilter.value === 'register') {
      // 登记收文：查询待登记的（receiveStepOrder = 0）
      const params: ReceiveRegisterQueryDTO = {
        pageNum: pagination.value.current,
        pageSize: pagination.value.size,
        receiveStepOrder: 0, // 待登记状态（receiveStepOrder为空或0）
        ...searchForm.value,
      }
      response = await getReceiveRegisterPage(params)
      console.log('[loadData] 登记收文查询参数:', params)
      console.log('[loadData] 登记收文响应:', response)
    }

    if (response.code === 200) {
      receiveList.value = response.data.records || []
      pagination.value.total = response.data.total || 0

      // 更新统计数据
      stats.value = {
        total: response.data.total || 0,
        pending: receiveList.value.filter(
          (item: ReceiveDocumentDistributeItem) => !item.sourceDocumentId,
        ).length,
        completed: receiveList.value.filter(
          (item: ReceiveDocumentDistributeItem) => item.sourceDocumentId,
        ).length,
      }
    } else {
      throw new Error(response.message || '获取数据失败')
    }
  } catch (error) {
    console.error('加载数据失败:', error)
    uni.showToast({
      title: '加载数据失败',
      icon: 'none',
    })
  } finally {
    loading.value = false
  }
}

// 页面加载时处理 URL 参数
onLoad((options: any) => {
  // 如果有 filter 参数，设置对应的筛选状态
  if (options && options.filter) {
    activeFilter.value = options.filter
  }
})

// 页面显示时加载/刷新数据（首次加载和从其他页面返回时都会触发）
onShow(() => {
  loadData()
})
</script>
<style lang="scss" scoped>
.receive-page {
  height: 100vh;
  background: #f8f9fa;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* 顶部导航 */
  .nav-header {
    background: #1a3582;
    padding: 46px 32rpx 20rpx 32rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
    flex-shrink: 0;

    .nav-left {
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .back-icon {
        font-size: 40rpx;
        font-weight: bold;
      }
    }

    .nav-center {
      flex: 1;
      text-align: center;

      .nav-title {
        font-size: 36rpx;
        font-weight: bold;
      }
    }

    .nav-right {
      min-width: 22px;
      .save-btn {
        font-size: 28rpx;
        padding: 12rpx 24rpx;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 12rpx;
      }
    }
  }

  /* 搜索区域 */
  .search-section {
    background: white;
    position: relative;
    z-index: 2;
    flex-shrink: 0;

    .search-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 24rpx 32rpx;
      cursor: pointer;
      transition: background 0.3s;

      &:active {
        background: #f8f9fa;
      }

      .search-header-left {
        display: flex;
        align-items: center;
        gap: 12rpx;

        .search-header-title {
          font-size: 28rpx;
          font-weight: 600;
          color: #333;
        }
      }

      .search-header-right {
        display: flex;
        align-items: center;
        gap: 8rpx;

        .search-toggle-text {
          font-size: 26rpx;
          color: #999;
        }
      }
    }

    .search-form {
      display: flex;
      flex-direction: column;
      gap: 16rpx;
      padding: 24rpx 32rpx;
      border-top: 1rpx solid #f0f0f0;

      .form-row {
        width: 100%;
      }

      .search-input {
        flex: 1;
        width: 100%;
        height: 80rpx;
        padding: 0 24rpx;
        border: 1rpx solid #e5e7eb;
        border-radius: 12rpx;
        font-size: 28rpx;
        background: #f8f9fa;
      }

      .search-buttons {
        display: flex;
        justify-content: flex-end;
        gap: 16rpx;

        .search-btn,
        .reset-btn {
          padding: 16rpx 32rpx;
          border-radius: 12rpx;
          font-size: 26rpx;
          text-align: center;
        }

        .search-btn {
          background: #1678ff;
          color: white;
        }

        .reset-btn {
          background: #f3f4f6;
          color: #6b7280;
          border: 1rpx solid #e5e7eb;
        }
      }
    }
  }

  /* 统计卡片 */
  .stats-section {
    padding: 32rpx;
    margin-top: -20rpx;
    position: relative;
    z-index: 1;

    .stats-grid {
      display: flex;
      gap: 24rpx;

      .stat-item {
        flex: 1;
        background: white;
        border-radius: 16rpx;
        padding: 32rpx 24rpx;
        text-align: center;
        box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
        border: 1rpx solid #e5e7eb;

        .stat-number {
          display: block;
          font-size: 40rpx;
          font-weight: bold;
          color: #1678ff;
          margin-bottom: 8rpx;
        }

        .stat-label {
          display: block;
          font-size: 24rpx;
          color: #6b7280;
        }
      }
    }
  }

  /* 筛选标签 */
  .filter-section {
    padding: 24rpx 32rpx;

    .filter-scroll {
      white-space: nowrap;

      .filter-tags {
        display: flex;
        gap: 16rpx;

        .filter-tag {
          padding: 8rpx 32rpx;
          background: white;
          border-radius: 24rpx;
          border: 1rpx solid #e5e7eb;
          transition: all 0.3s ease;

          &.active {
            background: #1678ff;
            border-color: #1678ff;

            text {
              color: white;
            }
          }

          text {
            font-size: 26rpx;
            color: #6b7280;
          }
        }
      }
    }
  }

  /* 列表区域 */
  .list-section {
    padding: 0 32rpx 24rpx;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .list-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24rpx;

      .list-title-section {
        display: flex;
        align-items: center;
        gap: 16rpx;

        .list-title {
          font-size: 32rpx;
          font-weight: bold;
          color: #1678ff;
        }

        .list-count {
          font-size: 24rpx;
          color: #6b7280;
        }
      }

      .add-button {
        padding: 16rpx 24rpx;
        background: #1678ff;
        border-radius: 12rpx;

        .add-text {
          font-size: 26rpx;
          color: white;
          font-weight: 500;
        }
      }
    }

    .loading-state {
      text-align: center;
      padding: 60rpx 0;

      .loading-text {
        font-size: 28rpx;
        color: #9ca3af;
      }
    }

    .receive-list {
      flex: 1;
      overflow: auto;
      .receive-item {
        background: white;
        border-radius: 16rpx;
        padding: 24rpx;
        margin-bottom: 16rpx;
        box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
        border: 1rpx solid #e5e7eb;

        .item-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 16rpx;

          .item-title {
            flex: 1;
            display: flex;
            align-items: center;
            gap: 16rpx;

            .title-text {
              font-size: 28rpx;
              font-weight: 600;
              color: #1678ff;
              flex: 1;
            }

            .status-badge {
              padding: 8rpx 16rpx;
              border-radius: 12rpx;
              font-size: 20rpx;

              &.system {
                background: #d1fae5;
                color: #065f46;
              }

              &.manual {
                background: #fef3c7;
                color: #92400e;
              }

              &.rejected {
                background: #fee2e2;
                color: #991b1b;
              }

              .status-text {
                font-size: 20rpx;
              }
            }
          }

          .item-time {
            font-size: 22rpx;
            color: #9ca3af;
            margin-left: 4px;
          }
        }

        .item-content {
          margin-bottom: 16rpx;

          .item-desc {
            display: block;
            font-size: 24rpx;
            color: #6b7280;
            line-height: 1.4;
            margin-bottom: 8rpx;
          }
        }

        .item-footer {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .item-info {
            flex: 1;

            .info-text {
              display: block;
              font-size: 22rpx;
              color: #9ca3af;
              margin-bottom: 4rpx;
            }
          }

          .item-actions {
            display: flex;
            gap: 16rpx;

            .action-btn {
              padding: 12rpx 24rpx;
              border-radius: 12rpx;
              font-size: 22rpx;
              color: #6b7280;
              background: #f3f4f6;
              border: 1rpx solid #e5e7eb;

              &.primary {
                background: #1678ff;
                color: white;
                border-color: #1678ff;
              }

              &.danger {
                background: #fef2f2;
                color: #dc2626;
                border-color: #fecaca;
              }
            }
          }
        }
      }
    }

    .empty-state {
      text-align: center;
      padding: 80rpx 0;

      .empty-icon {
        font-size: 80rpx;
        display: block;
        margin-bottom: 24rpx;
      }

      .empty-text {
        font-size: 28rpx;
        color: #9ca3af;
      }
    }
  }

  /* 分页 */
  .pagination-section {
    padding: 24rpx;
    background: white;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .pagination-info {
      font-size: 24rpx;
      color: #6b7280;
    }

    .pagination-buttons {
      display: flex;
      gap: 16rpx;

      .page-btn {
        padding: 12rpx 24rpx;
        border-radius: 12rpx;
        font-size: 24rpx;
        background: #f3f4f6;
        color: #6b7280;
        border: 1rpx solid #e5e7eb;

        &.disabled {
          opacity: 0.5;
          background: #f9fafb;
        }
      }
    }
  }

  /* 弹窗样式 */
  .preview-modal,
  .register-modal,
  .submit-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;

    .preview-content,
    .register-content,
    .submit-content {
      background: white;
      border-radius: 16rpx;
      width: 90%;
      max-height: 80%;
      overflow: hidden;
      display: flex;
      flex-direction: column;

      .preview-header,
      .register-header,
      .submit-header {
        padding: 32rpx;
        border-bottom: 1rpx solid #e5e7eb;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-shrink: 0;

        .preview-title,
        .register-title,
        .submit-title {
          font-size: 32rpx;
          font-weight: bold;
          color: #1678ff;
        }

        .close-btn {
          font-size: 40rpx;
          color: #9ca3af;
          width: 60rpx;
          height: 60rpx;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }

      .preview-body,
      .register-body {
        padding: 32rpx;

        .preview-text,
        .register-text {
          font-size: 28rpx;
          color: #6b7280;
          text-align: center;
        }
      }

      .submit-body {
        flex: 1;
        overflow-y: auto;
        padding: 24rpx 32rpx;

        .section-title {
          font-size: 28rpx;
          font-weight: 600;
          color: #374151;
          margin-bottom: 16rpx;
        }

        .approver-section {
          margin-bottom: 24rpx;

          .approver-list {
            max-height: 300rpx;
            border: 1rpx solid #e5e7eb;
            border-radius: 12rpx;
            background: #f9fafb;

            .approver-item {
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 20rpx 24rpx;
              border-bottom: 1rpx solid #e5e7eb;

              &:last-child {
                border-bottom: none;
              }

              &.selected {
                background: #ecf5ff;
                border-left: 4rpx solid #1678ff;
              }

              .approver-info {
                flex: 1;

                .approver-name {
                  display: block;
                  font-size: 28rpx;
                  color: #1678ff;
                  font-weight: 500;
                  margin-bottom: 8rpx;
                }

                .approver-dept {
                  display: block;
                  font-size: 22rpx;
                  color: #9ca3af;
                }
              }

              .approver-check {
                width: 40rpx;
                height: 40rpx;
                background: #1678ff;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;

                .check-icon {
                  font-size: 24rpx;
                  color: white;
                  font-weight: bold;
                }
              }
            }
          }
        }

        .selected-section {
          margin-bottom: 24rpx;

          .selected-list {
            border: 1rpx solid #e5e7eb;
            border-radius: 12rpx;
            background: #f9fafb;
            padding: 16rpx;

            .selected-item {
              display: flex;
              align-items: center;
              padding: 16rpx;
              background: white;
              border-radius: 8rpx;
              margin-bottom: 12rpx;

              &:last-child {
                margin-bottom: 0;
              }

              .selected-order {
                width: 40rpx;
                height: 40rpx;
                background: #1678ff;
                color: white;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 22rpx;
                font-weight: bold;
                margin-right: 16rpx;
                flex-shrink: 0;
              }

              .selected-name {
                flex: 1;
                font-size: 26rpx;
                color: #374151;
              }

              .remove-btn {
                width: 40rpx;
                height: 40rpx;
                background: #fef2f2;
                color: #dc2626;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 32rpx;
                flex-shrink: 0;
              }
            }
          }
        }

        .opinion-section {
          margin-bottom: 24rpx;

          .opinion-input {
            width: 100%;
            min-height: 160rpx;
            padding: 16rpx;
            border: 1rpx solid #e5e7eb;
            border-radius: 12rpx;
            font-size: 26rpx;
            color: #374151;
            background: #f9fafb;
          }
        }

        .submit-actions {
          display: flex;
          gap: 24rpx;
          padding-top: 24rpx;
          border-top: 1rpx solid #e5e7eb;

          .action-btn {
            flex: 1;
            height: 80rpx;
            border-radius: 12rpx;
            display: flex;
            align-items: center;
            justify-content: center;

            &.cancel {
              background: #f3f4f6;
              border: 1rpx solid #d1d5db;

              .btn-text {
                color: #6b7280;
              }
            }

            &.primary {
              background: #1678ff;

              .btn-text {
                color: white;
              }

              &.disabled {
                opacity: 0.5;
                background: #9ca3af;
              }
            }

            .btn-text {
              font-size: 28rpx;
              font-weight: 500;
            }
          }
        }
      }
    }
  }
}
</style>
